---
title: عنصر قائمة
image: /images/user-guide/kanban-views/kanban.png
---

<Frame>
  <img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
</Frame>

عنصر قائمة متعدد الاستخدامات مصمم للاستخدام في قائمة أو قائمة تنقل.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  const handleButtonClick = (event) => {
    console.log("Icon button clicked!", event);
  };

  return (
    <MenuItem
      LeftIcon={IconBell}
      accent="default"
      text="Menu item text"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={true}
      testId="menu-item-1"
      onClick={handleMenuItemClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات                       | النوع       | الوصف                                                                                                                     |
| ------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------- |
| الأيقونة اليسرى                | مكون رمز    | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة                                                                            |
| accent                         | string      | Specifies the accent color of the menu item. تشمل الخيارات: `افتراضي`, `خطر`, `موضع مؤقت` |
| نص                             | string      | محتوى النص في عنصر القائمة                                                                                                |
| أزرار الرموز                   | array       | مصفوفة الكائنات التي تمثل أزرار الأيقونات الإضافية المرتبطة بعنصر القائمة                                                 |
| isTooltipOpen                  | قيمة منطقية | Controls the visibility of the tooltip associated with the menu item                                                      |
| testId                         | string      | سمة data-testid لأغراض الاختبار                                                                                           |
| عند_النقر | وظيفة       | دالة الاستدعاء يتم تنشيطها عند النقر فوق عنصر القائمة                                                                     |
| className                      | string      | اسم اختياري لتنسيقات إضافية                                                                                               |

</Tab>
</Tabs>

## الأشكال

تتضمن الأشكال المختلفة لمكون عنصر القائمة ما يلي:

### أمر

عنصر قائمة على نمط الأوامر داخل القائمة للإشارة إلى اختصارات لوحة المفاتيح.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui/display";

export const MyComponent = () => {
  const handleCommandClick = () => {
    console.log("Command clicked!");
  };

  return (
    <MenuItemCommand
      LeftIcon={IconBell}
      text="First Option"
      firstHotKey="⌘"
      secondHotKey="1"
      isSelected={true}
      onClick={handleCommandClick}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات                       | النوع       | الوصف                                                    |
| ------------------------------ | ----------- | -------------------------------------------------------- |
| الأيقونة اليسرى                | مكون رمز    | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة           |
| نص                             | string      | محتوى النص في عنصر القائمة                               |
| firstHotKey                    | string      | أول اختصار لوحة مفاتيح مرتبط بالأمر                      |
| secondHotKey                   | string      | The second keyboard shortcut associated with the command |
| isSelected                     | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددا أو مميزا          |
| عند_النقر | وظيفة       | دالة الاستدعاء يتم تنشيطها عند النقر فوق عنصر القائمة    |
| className                      | string      | اسم اختياري لتنسيقات إضافية                              |

</Tab>
</Tabs>

### قابلة للسحب

مكون عنصر قائمة قابل للسحب مصمم ليتم استخدامه في قائمة أو قائمة حيث يمكن سحب العناصر، ويتم تنفيذ إجراءات إضافية عبر أزرار الأيقونات.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui/display";

export const MyComponent = () => {
  const handleMenuItemClick = (event) => {
    console.log("Menu item clicked!", event);
  };

  return (
    <MenuItemDraggable
      LeftIcon={IconBell}
      accent="default"
      iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
      isTooltipOpen={false}
      onClick={handleMenuItemClick}
      text="Menu item draggable"
      isDragDisabled={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات                       | النوع       | الوصف                                                                                            |
| ------------------------------ | ----------- | ------------------------------------------------------------------------------------------------ |
| الأيقونة اليسرى                | مكون رمز    | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة                                                   |
| accent                         | string      | لون العنصر لهجة القائمة. It can either be `default`, `placeholder`, and `danger` |
| أزرار الرموز                   | array       | مصفوفة الكائنات التي تمثل أزرار الأيقونات الإضافية المرتبطة بعنصر القائمة                        |
| isTooltipOpen                  | قيمة منطقية | Controls the visibility of the tooltip associated with the menu item                             |
| عند_النقر | function    | دالة رد النداء ليتم تفعيلها عند النقر على الرابط                                                 |
| نص                             | string      | محتوى النص في عنصر القائمة                                                                       |
| isDragDisabled                 | قيمة منطقية | يشير إلى ما إذا كان تم تعطيل السحب                                                               |
| className                      | string      | اسم اختياري لتنسيقات إضافية                                                                      |

</Tab>
</Tabs>

### التحديد المتعدد

يوفر طريقة لتنفيذ وظيفة التحديد المتعدد مع مربع اختيار مصاحب.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui/display";

export const MyComponent = () => {

  return (
    <MenuItemMultiSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات        | النوع       | الوصف                                                              |
| --------------- | ----------- | ------------------------------------------------------------------ |
| الأيقونة اليسرى | مكون رمز    | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة                     |
| نص              | string      | محتوى النص في عنصر القائمة                                         |
| المحدد          | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص) |
| onSelectChange  | function    | وظيفة استدعاء يتم تشغيلها عند تغيير حالة مربع الاختيار             |
| className       | string      | اسم اختياري لتنسيقات إضافية                                        |

</Tab>
</Tabs>

### Multi Select Avatar

عنصر قائمة متعدد الخيارات مع صورة رمزية، ومربع اختيار للتحديد، ومحتوى نصي.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  return (
    <MenuItemMultiSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={false}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات        | النوع        | الوصف                                                                        |
| --------------- | ------------ | ---------------------------------------------------------------------------- |
| الصورة الرمزبية | `مكون React` | الصورة الرمزية أو الأيقونة التي سيتم عرضها على الجانب الأيسر من عنصر القائمة |
| نص              | string       | محتوى النص في عنصر القائمة                                                   |
| المحدد          | قيمة منطقية  | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص)           |
| onSelectChange  | function     | وظيفة استدعاء يتم تشغيلها عند تغيير حالة مربع الاختيار                       |
| className       | string       | اسم اختياري لتنسيقات إضافية                                                  |

</Tab>
</Tabs>

### التنقل

A menu item featuring an optional left icon, textual content, and a right-chevron icon.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui/display";

export const MyComponent = () => {
  const handleNavigation = () => {
    console.log("Navigate to another page");
  };

  return (
    <MenuItemNavigate
      LeftIcon={IconBell}
      text="First Option"
      onClick={handleNavigation}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات        | النوع    | الوصف                                                      |
| --------------- | -------- | ---------------------------------------------------------- |
| الأيقونة اليسرى | مكون رمز | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة             |
| نص              | string   | محتوى النص في عنصر القائمة                                 |
| عند النقر       | وظيفة    | دالة الاستدعاء التي يتم تحفيزها عند النقر على عنصر القائمة |
| className       | string   | اسم اختياري لتنسيقات إضافية                                |

</Tab>
</Tabs>

### اختيار

عنصر قائمة يمكن تحديده، مع شكل محتوى متاح (أيقونة ونص) ومُؤشر (أيقونة تحقق) لحالة الاختيار.

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelect
      LeftIcon={IconBell}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات        | النوع       | الوصف                                                              |
| --------------- | ----------- | ------------------------------------------------------------------ |
| الأيقونة اليسرى | مكون رمز    | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة                     |
| نص              | string      | محتوى النص في عنصر القائمة                                         |
| المحدد          | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص) |
| معطل            | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة معطلاً                            |
| معطل            | قيمة منطقية | يشير إلى ما إذا كان يتم التحويم حاليًا على عنصر القائمة            |
| عند النقر       | function    | دالة الاستدعاء التي يتم تحفيزها عند النقر على عنصر القائمة         |
| className       | string      | اسم اختياري لتنسيقات إضافية                                        |

</Tab>
</Tabs>

### Select Avatar

A selectable menu item with an avatar, featuring optional left content (avatar and text) and an indicator (check icon) for the selected state.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectAvatar } from "twenty-ui/display";

export const MyComponent = () => {
  const imageUrl =
    "";

  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectAvatar
      avatar={<img src={imageUrl} alt="Avatar" />}
      text="First Option"
      selected={true}
      disabled={false}
      hovered={false}
      testId="menu-item-test"
      onClick={handleSelection}
      className
    />
  );
};

```

</Tab>
<Tab title="Props">

| المحددات        | النوع        | الوصف                                                                        |
| --------------- | ------------ | ---------------------------------------------------------------------------- |
| الصورة الرمزبية | `مكون React` | الصورة الرمزية أو الأيقونة التي سيتم عرضها على الجانب الأيسر من عنصر القائمة |
| نص              | string       | محتوى النص في عنصر القائمة                                                   |
| المحدد          | قيمة منطقية  | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص)           |
| معطل            | قيمة منطقية  | يشير إلى ما إذا كان عنصر القائمة معطلاً                                      |
| معطل            | قيمة منطقية  | يشير إلى ما إذا كان يتم التحويم حاليًا على عنصر القائمة                      |
| testId          | string       | سمة data-testid لأغراض الاختبار                                              |
| عند النقر       | function     | دالة الاستدعاء التي يتم تحفيزها عند النقر على عنصر القائمة                   |
| className       | string       | اسم اختياري لتنسيقات إضافية                                                  |

</Tab>
</Tabs>

### اختيار اللون

A selectable menu item with a color sample for scenarios where you want users to choose a color from a menu.

<Tabs>
<Tab title="Usage">

```jsx
import { MenuItemSelectColor } from "twenty-ui/display";

export const MyComponent = () => {
  const handleSelection = () => {
    console.log("Menu item selected");
  };

  return (
    <MenuItemSelectColor
      color="green"
      selected={true}
      disabled={false}
      hovered={true}
      variant="default"
      onClick={handleSelection}
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات  | النوع       | الوصف                                                                                                                                                                                             |
| --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| اللون     | string      | لون الثيم المعروض كعينة في عنصر القائمة. الخيارات تشمل: `أخضر`, `تركواز`, `سماوي`, `أزرق`, `أرجواني`, `وردي`, `أحمر`, `برتقالي`, `أصفر`, `رمادي`. |
| المحدد    | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة محددًا (مفحوص)                                                                                                                                |
| معطل      | قيمة منطقية | يشير إلى ما إذا كان عنصر القائمة معطلاً                                                                                                                                                           |
| معطل      | قيمة منطقية | يشير إلى ما إذا كان يتم التحويم حاليًا على عنصر القائمة                                                                                                                                           |
| التنوع    | string      | The variant of the color sample. يمكن أن يكون إما `افتراضي` أو `خط أنابيب`                                                                                                        |
| عند النقر | function    | دالة الاستدعاء التي يتم تحفيزها عند النقر على عنصر القائمة                                                                                                                                        |
| className | string      | اسم اختياري لتنسيقات إضافية                                                                                                                                                                       |

</Tab>
</Tabs>

### تبديل

عنصر قائمة مع مفتاح تبديل مرتبط للسماح للمستخدمين بتمكين أو تعطيل ميزة معينة

<Tabs>
<Tab title="Usage">

```jsx
import { IconBell } from '@tabler/icons-react';

import { MenuItemToggle } from 'twenty-ui/display';

export const MyComponent = () => {

  return (
    <MenuItemToggle
      LeftIcon={IconBell}
      text="First Option"
      toggled={true}
      toggleSize="small"
      className
    />
  );
};
```

</Tab>
<Tab title="Props">

| المحددات        | النوع       | الوصف                                                        |
| --------------- | ----------- | ------------------------------------------------------------ |
| الأيقونة اليسرى | مكون رمز    | أيقونة اختيارية تُعرض قبل النص في عنصر القائمة               |
| نص              | string      | محتوى النص في عنصر القائمة                                   |
| معلق عليه       | قيمة منطقية | يشير إلى ما إذا كان مفتاح التبديل في حالة "تشغيل" أو "إيقاف" |
| onToggleChange  | وظيفة       | دالة الاستدعاء التي يتم تحفيزها عند تغيير حالة مفتاح التبديل |
| حجم التبديل     | string      | حجم مفتاح التبديل. يمكن أن يكون إما \\     |
| className       | string      | اسم اختياري لتنسيقات إضافية                                  |

</Tab>
</Tabs>
